<template>
  <view class="ava-datail">
    <view class="title-avatar">
      <image class="img" :src="pic" mode="aspectFill"></image>
    </view>
    <view class="xz-avat">
      <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
        <block v-for="(item,index) in picUrl" :key="index">
          <image class="imgs" :class="{img:img}" @click="togleImg(item)" :src="getImg(item.sattDir)" mode="heightFix">
          </image>
        </block>
      </scroll-view>
    </view>
    <view class="two-btn">
      <button class="bmy" @click="resetPhone">
        不满意重拍
      </button>
      <button class="start" @click="toAiStyle(item)">
        开始AI之旅
      </button>
    </view>
  </view>
  <!-- <view class="mask" v-show="isShow">
    <div class="loader"></div>
    <p style="margin-top: 80%;  font-family: Arial, sans-serif;color: #3498db;font-size: 28rpx; font-weight: 700;">
      加载中...</p>
  </view> -->
  <!-- #ifdef H5 -->
  <view class="mask" v-show="isShow">
    <div class="loader"></div>
    <p style="margin-top: 100%;  font-family: Arial, sans-serif;color: #3cb4ff;font-size: 28rpx; font-weight: 700;">
      加载中...</p>
  </view>
  <!-- #endif -->

  <!-- #ifdef MP -->
  <view class="mask" v-show="isShow">
    <div class="loader"></div>
    <p style="margin-top: 90%;  font-family: Arial, sans-serif;color: #3cb4ff;font-size: 28rpx; font-weight: 700;">
      加载中...</p>
  </view>
  <!-- #endif -->
</template>

<script setup>
  import {
    ref,
    reactive
  } from "vue"
  import {
    onLoad,
  } from "@dcloudio/uni-app";
  import {
    getHairApi
  } from '../../api/hirstyStyle.js'
  import getImgUrl from '@/config/img.js'
  const pic = ref('')
  const picUrl = ref([])
  const picImg = ref('')
  const img = ref(false)
  const attId = ref('')
  const isShow = ref(false) //遮罩层
  const resetPhone = () => {
    // #ifdef MP
    uni.navigateTo({
      url: '/pages/index/components/photograph/photograph'
    })
    // #endif
    // #ifdef H5
    uni.chooseImage({
      sourceType: ['camera '], //从相册选择
      success: function(res) {
        // src.value = res.tempFilePaths[0]
        let pic = res.tempFilePaths[0]
        uni.navigateTo({
          url: '/pages/avatarDetail/avatarDetail?pic=' + pic + '&picUrl=null'
        })
      }
    });
    // #endif
  }
  //切换图片
  function togleImg(item) {
    pic.value = getImg(item.sattDir)
    img.value = true
    attId.value = item.attId
  }

  //开启ai之旅
  //第二步-按钮触发-发给后端调用ai接口提取特征
  // const params =ref({});
  const toAiStyle = (item) => {
    if (attId.value == '') {
      uni.showToast({
        title: '请选择图片',
        icon: 'none',
        duration: 2000
      })
      return false
    }
    isShow.value = true
    let params = {
      attid: attId.value
    }
    getHairApi(params).then(res => {
      if (res.code == 200) {
        isShow.value = false
        uni.navigateTo({
          url: `/pages/aITravel/aITravel?pic=` + pic.value + '&featureId=' + attId.value
        })
      }
      isShow.value = false
    })
  }

  // 获取图片地址
  const getImg = (url) => {
    return getImgUrl(url)
  }

  //文件上传
  const uploadImage = (filePath) => {
    isShow.value = true
    uni.uploadFile({
      url: getImgUrl('api/front/ai-phg/step1Prune'),
      filePath: filePath,
      name: 'multipart',
      header: {
        'Authori-Zation': uni.getStorageSync('token')
      },
      success(res) {
        let resData = JSON.parse(res.data)
        if (resData.code == 500) {
          uni.showToast({
            title: resData.message,
            icon: "none",
            duration: 5000
          })
        } else if (resData.code == 200) {
          picUrl.value = resData.data
        } else {
          uni.showToast({
            title: "请对准人像",
            icon: "none",
            duration: 5000
          })
        }
        isShow.value = false
      },
      fail(err) {
        isShow.value = false
        console.log('文件上传失败', err);
      }
    })
  }

  // 页面参数
  onLoad((option) => {
    pic.value = option.pic
    /* 图片上传 begin*/

    //文件上传
    uploadImage(option.pic)
  })
</script>

<style scoped lang="scss">
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100vh;
    text-align: center;
    background: rgba(0, 0, 0, 0.4);

    .loader {
      position: absolute;
      border: 8px solid #f3f3f3;
      border-top: 8px solid #3498db;
      border-radius: 50%;
      left: 40%;
      top: 30%;
      transform: translate(-50%, -50%);
      width: 70px;
      height: 70px;
      animation: spin 1s linear infinite;
      margin: 20px auto;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  }

  .scroll-Y {
    height: 300rpx;
  }

  .scroll-view_H {
    white-space: nowrap;
    width: 100%;
  }

  .imgs {
    display: inline-block;
    width: 200rpx;
    height: 200rpx;
    line-height: 200rpx;
    text-align: center;
    margin-left: 10rpx;
  }

  .ava-datail {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;

    .title-avatar {
      width: 600rpx;
      height: 800rpx;
      border-radius: 20rpx;
      overflow: hidden;

      .img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    .xz-avat {
      width: 640rpx;
      height: 235rpx;
      padding: 20rpx;
      margin-top: 30rpx;
      border: 2rpx #f5f5f5 solid;
      border-radius: 20rpx;
      overflow: hidden;
    }

    .two-btn {
      width: 620rpx;
      height: 50rpx;
      display: flex;
      justify-content: space-between;
      margin-top: 10rpx;

      .bmy {
        width: 250rpx;
        height: 70rpx;
        border-radius: 35rpx;
        text-align: center;
        line-height: 70rpx;
        font-size: 24rpx;
        background: linear-gradient(to right, #fa0fcd, 50%, #f91932);
      }

      .start {
        width: 250rpx;
        height: 70rpx;
        border-radius: 35rpx;
        text-align: center;
        font-size: 24rpx;
        line-height: 70rpx;
        background: linear-gradient(to right, #f1dc0d, 50%, #72f119);
      }
    }
  }
</style>